<template>
<div  class="mui-content"> 
  <div v-if="favoriteList.length ==0" class="reminder"><img src="../assets/空列表@3x.png" alt=""></div>
    <ul v-if="favoriteList.length !=0" id="OA_task_1" class="mui-table-view" v-for="(item,index) in favoriteList" :key="index">
            <li class="mui-table-view-cell mui-transitioning">
                <div class="mui-slider-right mui-disabled" @click="delFavorite(item.id,item.type)">
                    <a class="mui-btn mui-btn-red" style="transform: translate(0px, 0px);">删除</a>
                </div>
                <div class="mui-slider-handle" style="transform: translate(0px, 0px);"  >
                    <a href="javascript:">
                        <img class="mui-media-object mui-pull-left" :src="item.image" alt="">
                        <div class="mui-media-body">
						   <span class="text1">{{item.total}}</span>
                           <div>
					            <span class='mui-ellipsis'  v-if="item.type==16">众筹活动</span>
                                <span class='mui-ellipsis'  v-if="item.type==12">资讯</span>
                                <span class='mui-ellipsis'  v-if="item.type==13">活动</span>
						        <span class="date">{{item.time | fmtDate}}</span>     
                           </div>
					    </div>
                    </a>        
                </div>
            </li>
        </ul> 
</div>
</template>

  <script>
export default {
    data() {
        return {
            favoriteList: [],
            name: '我的收藏'
        }
    },
    created() {
        document.title = this.name
        this.getFavorite()
    },
    methods: {
        delFavorite(id, type) {
            this.utils.$post(
                this.utils.DEL_COLLECTION,
                data => {
                    if (data.code == 0) {
                        this.getFavorite()
                    }
                },
                {
                    id: id,
                    type: type
                }
            )
            delFavorite
        },
        getFavorite() {
            this.utils.$get(this.utils.GET_LIKE_LIST, data => {
                console.log(data)
                this.favoriteList = data.data
            })
        }
    }
}
</script>
<style lang="less">
.mui-content{
    height: 100%;
}
.reminder {
    height: 100%;
    background-color: #f5f5f5;
    text-align: center;
    > img {
        width: 4rem;
        height: 3.5rem;
        margin: 0 auto;
    }
}
.mui-content {
    background-color: #f5f5f5;
    .mui-table-view {
        .mui-table-view-cell {
            width: 100%;
            padding: 0.15rem !important;
            height: 2.22rem;
            // position:sticky !important;
            .mui-slider-handle {
                height: 100%;
                > a {
                    width: 100%;    
                    display: block;
                    height: 100%;
                    .mui-media-object.mui-pull-left {
                        width: 2.4rem;
                        height: 1.6rem;
                        vertical-align: middle;
                        max-width: 2.4rem !important;
                        margin: 0.2rem !important;
                    }
                    .mui-media-body {
                        padding-top: 0.23rem;
                        padding-left: 0.2rem !important;
                        position: relative;
                        height: 100%;
                        .text1 {
                            padding-bottom: 0.5rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            white-space: normal !important;
                            font-size: 0.3rem;
                            color: #333333;
                        }
                        > div {
                            position: absolute;
                            bottom: 0.1rem;
                            right: 0.2rem;
                            left: 0.2rem;
                        }
                        .mui-ellipsis {
                            // display: inline-block;
                            // padding-top:.5rem    !important;
                            font-size: 0.28rem;
                            color: #999999;
                            padding-right: 0.5rem;
                        }
                        .date {
                            //  display: inline-block;
                            //  padding-top:.5rem  !important;
                            font-size: 0.28rem;
                            color: #999999;
                            float: right;
                            // right: 0.2rem;
                        }
                    }
                }
            }
        }
    }
}
</style>

